<template>
  <el-card class="stat-card" :class="cardClass" shadow="hover">
    <div class="stat-content">
      <!-- 左侧内容 -->
      <div class="stat-info">
        <div class="stat-value" :class="valueClass">
          <span v-if="prefix" class="value-prefix">{{ prefix }}</span>
          <span class="value-number">{{ displayValue }}</span>
          <span v-if="suffix" class="value-suffix">{{ suffix }}</span>
        </div>
        <div class="stat-title">{{ title }}</div>
        <div class="stat-subtitle" v-if="subtitle">{{ subtitle }}</div>
        
        <!-- 趋势指示器 -->
        <div class="stat-trend" v-if="trend">
          <Icon 
            :icon="trend.direction === 'up' ? 'ep:arrow-up' : 'ep:arrow-down'" 
            :class="trendClass"
          />
          <span :class="trendClass">{{ trend.value }}{{ trend.unit || '%' }}</span>
          <span class="trend-text">{{ trend.text || '较上期' }}</span>
        </div>
      </div>

      <!-- 右侧图标或图表 -->
      <div class="stat-visual">
        <!-- 图标模式 -->
        <div v-if="icon && !chartData" class="stat-icon" :class="iconClass">
          <Icon :icon="icon" />
        </div>
        
        <!-- 迷你图表模式 -->
        <div v-else-if="chartData" class="stat-chart">
          <EchartsChart
            :option="chartOption"
            width="80px"
            height="60px"
            :auto-resize="false"
          />
        </div>
      </div>
    </div>

    <!-- 底部操作区域 -->
    <div class="stat-footer" v-if="actions && actions.length > 0">
      <el-divider class="my-2" />
      <div class="stat-actions">
        <el-button
          v-for="action in actions"
          :key="action.key"
          :type="action.type || 'text'"
          :size="action.size || 'small'"
          :disabled="action.disabled"
          link
          @click="handleAction(action)"
        >
          <Icon v-if="action.icon" :icon="action.icon" class="mr-1" />
          {{ action.label }}
        </el-button>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import EchartsChart from './EchartsChart.vue'

interface StatAction {
  key: string
  label: string
  type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
  size?: 'large' | 'default' | 'small'
  icon?: string
  disabled?: boolean
}

interface StatTrend {
  direction: 'up' | 'down'
  value: number | string
  unit?: string
  text?: string
}

interface Props {
  /** 标题 */
  title: string
  /** 副标题 */
  subtitle?: string
  /** 数值 */
  value: number | string
  /** 前缀 */
  prefix?: string
  /** 后缀 */
  suffix?: string
  /** 图标 */
  icon?: string
  /** 主题色彩 */
  color?: 'primary' | 'success' | 'warning' | 'danger' | 'info'
  /** 趋势数据 */
  trend?: StatTrend
  /** 图表数据 */
  chartData?: number[]
  /** 图表类型 */
  chartType?: 'line' | 'bar' | 'area'
  /** 操作按钮 */
  actions?: StatAction[]
  /** 是否加载中 */
  loading?: boolean
  /** 数值格式化函数 */
  formatter?: (value: number | string) => string
}

const props = withDefaults(defineProps<Props>(), {
  color: 'primary',
  chartType: 'line',
  loading: false
})

const emit = defineEmits<{
  'action-click': [action: StatAction]
}>()

/** 卡片样式类 */
const cardClass = computed(() => {
  return {
    [`stat-card-${props.color}`]: props.color,
    'stat-card-loading': props.loading
  }
})

/** 数值样式类 */
const valueClass = computed(() => {
  return `stat-value-${props.color}`
})

/** 图标样式类 */
const iconClass = computed(() => {
  return `stat-icon-${props.color}`
})

/** 趋势样式类 */
const trendClass = computed(() => {
  if (!props.trend) return ''
  return props.trend.direction === 'up' ? 'trend-up' : 'trend-down'
})

/** 显示的数值 */
const displayValue = computed(() => {
  if (props.loading) return '--'
  if (props.formatter) {
    return props.formatter(props.value)
  }
  return props.value
})

/** 图表配置 */
const chartOption = computed(() => {
  if (!props.chartData) return null

  const baseOption = {
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0
    },
    xAxis: {
      type: 'category',
      show: false,
      data: props.chartData.map((_, index) => index)
    },
    yAxis: {
      type: 'value',
      show: false
    },
    series: [{
      data: props.chartData,
      type: props.chartType,
      smooth: true,
      symbol: 'none',
      lineStyle: {
        width: 2,
        color: getChartColor()
      },
      areaStyle: props.chartType === 'area' ? {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0,
            color: getChartColor(0.3)
          }, {
            offset: 1,
            color: getChartColor(0.1)
          }]
        }
      } : undefined
    }]
  }

  return baseOption
})

/** 获取图表颜色 */
const getChartColor = (opacity = 1) => {
  const colors = {
    primary: `rgba(59, 130, 246, ${opacity})`,
    success: `rgba(34, 197, 94, ${opacity})`,
    warning: `rgba(245, 158, 11, ${opacity})`,
    danger: `rgba(239, 68, 68, ${opacity})`,
    info: `rgba(6, 182, 212, ${opacity})`
  }
  return colors[props.color] || colors.primary
}

/** 处理操作点击 */
const handleAction = (action: StatAction) => {
  emit('action-click', action)
}
</script>

<style scoped>
.stat-card {
  height: 100%;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-card-loading {
  opacity: 0.7;
}

.stat-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 8px;
  display: flex;
  align-items: baseline;
}

.value-prefix,
.value-suffix {
  font-size: 16px;
  font-weight: normal;
  opacity: 0.8;
}

.value-prefix {
  margin-right: 4px;
}

.value-suffix {
  margin-left: 4px;
}

.stat-value-primary {
  color: #3b82f6;
}

.stat-value-success {
  color: #22c55e;
}

.stat-value-warning {
  color: #f59e0b;
}

.stat-value-danger {
  color: #ef4444;
}

.stat-value-info {
  color: #06b6d4;
}

.stat-title {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 4px;
}

.stat-subtitle {
  font-size: 12px;
  color: #9ca3af;
  margin-bottom: 8px;
}

.stat-trend {
  display: flex;
  align-items: center;
  font-size: 12px;
  gap: 4px;
}

.trend-up {
  color: #22c55e;
}

.trend-down {
  color: #ef4444;
}

.trend-text {
  color: #9ca3af;
}

.stat-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 16px;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.stat-icon-primary {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.stat-icon-success {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

.stat-icon-warning {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.stat-icon-danger {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.stat-icon-info {
  background: rgba(6, 182, 212, 0.1);
  color: #06b6d4;
}

.stat-chart {
  width: 80px;
  height: 60px;
}

.stat-footer {
  margin-top: 8px;
}

.stat-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

:deep(.el-divider--horizontal) {
  margin: 8px 0;
}
</style>
